<template>
  <el-card style="width: 340px;height:590px">
    <div slot="header">
      <span>用户区域分布排行榜</span>
    </div>
    <el-table :data="source">
      <el-table-column type="index" label="排名" width="50px"></el-table-column>
      <el-table-column
        property="province"
        label="省份"
        width="100px"
      ></el-table-column>
      <el-table-column label="人数" width="140px">
        <template slot-scope="scope">
          <el-row>
            <el-col>{{ scope.row.count }}</el-col>
            <el-col>
              <el-progress
                :percentage="Number((scope.row.count / maxCount) * 100)"
                :show-text="false"
              ></el-progress>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import Api from '../../api/Count.js'
export default {
  data() {
    return {
      source: [
        {
          province: '浙江',
          count: 18
        },
        {
          province: '江苏',
          count: 12
        },
        {
          province: '上海',
          count: 10
        },
        {
          province: '安徽',
          count: 8
        },
        {
          province: '河南',
          count: 5
        },
        {
          province: '山东',
          count: 4
        },
        {
          province: '河北',
          count: 2
        },
        {
          province: '辽宁',
          count: 2
        }
      ],
      maxCount: 18
    }
  },
  methods: {
    laodSource() {
      this.axios.get(Api.area).then(res => {
        if (res.data.status === 0) {
          this.source = res.data.data
          let count = 0
          for (let i = 0; i < this.source.length; i++) {
            count += this.source[i].count
          }
          this.maxCount = count
        }
      })
    }
  },
  mounted() {
    this.laodSource()
  }
}
</script>

<style></style>
